<%- include('layout/header', { title: '微博 - 注册', isNarrow: true })%>

<h1>注册</h1>
<% if (locals.isLogin) { %>
  <p><%= locals.userName%> 您已成功登录，请直接访问<a href="/">首页</a></p>
<% } else { %>
  <form>
    <div class="form-group">
      <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
      <small id="span-username-info" class="form-text text-muted"></small>
    </div>
    <div class="form-group">
      <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" id="input-password-repeat" placeholder="重新输入密码">
      <small id="span-password-repeat-info" class="form-text text-muted"></small>
    </div>
    <div class="form-group">
      <select class="form-control" id="select-gender">
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">保密</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary" id="btn-submit">注册</button>
    &nbsp;
    <a href="/login">已有账号，返回登录>></a>
  </form>

  <script>
    $(function() {
      var $inputUserName = $('#input-username')
      var $spanUserNameInfo = $('#span-username-info')
      var $inputPassword = $('#input-password')
      var $inputPasswordRepeat = $('#input-password-repeat')
      var $spanPasswordRepeatInfo = $('#span-password-repeat-info')
      var $selectGender = $('#select-gender')
      var userNameTimeoutId
      var passwordTimeoutId
      var isPasswordSame = false // 默认两次密码不一致
      var isUserNameExist = true // 默认用户名已存在

      // 监听用户名输入
      $inputUserName.on('input', function() {
        // 做一个简单的防抖
        if (userNameTimeoutId) {
          clearTimeout(userNameTimeoutId)
        }
        userNameTimeoutId = setTimeout(function() {
          // 判断用户名是否已存在
          var userName = $inputUserName.val()
          ajax.post('/api/user/isExist', {
            userName
          }, function(err, data) {
            $spanUserNameInfo.show()
            if (err) {
              $spanUserNameInfo.text('用户名可用')
              isUserNameExist = false
            } else {
              $spanUserNameInfo.text('用户名已存在！')
              isUserNameExist = true
            }
          })
        }, 500)
      })

      // 监听验证密码输入
      $inputPasswordRepeat.on('input', function () {
        // 做一个简单的防抖
        if (passwordTimeoutId) {
          clearTimeout(passwordTimeoutId)
        }
        passwordTimeoutId = setTimeout(function() {
          var password = $inputPassword.val()
          var passwordRepeat = $inputPasswordRepeat.val()
          $spanPasswordRepeatInfo.show()
          if (password === passwordRepeat) {
            $spanPasswordRepeatInfo.text('两次密码一致')
            isPasswordSame = true
          } else {
            $spanPasswordRepeatInfo.text('两次密码不一致！')
            isPasswordSame = false
          }
        }, 500)
      })

      // 注册事件
      $('#btn-submit').click(function(e) {
        // 阻止默认的提交表单行为
        e.preventDefault()

        // 验证
        if (isUserNameExist) {
          alert('用户名已存在')
          return
        }
        if (!isPasswordSame) {
          alert('两次密码不一致')
          return
        }

        var userName = $inputUserName.val()
        var password = $inputPassword.val()
        var gender = parseInt($selectGender.val())

        // 提交数据
        ajax.post('/api/user/register', {
          userName,
          password,
          gender
        }, function(err, data) {
          if (err) {
            alert(err)
            return
          }
          alert('注册成功，请登录')
          location.href = '/login'
        })
      })
    })
  </script>
<% } %>

<%- include('layout/footer')%>